<template>
    <el-popover popper-class="popover-padding-0 popover-min-width-0" v-model="selectOpenStatus">
        <div class="server-info" slot="reference">
            <span class="name" :title="$t(day.key)">{{ $t(day.key) }}</span>
            <i class="el-icon-arrow-up select-caret" :class="{'is-reverse': selectOpenStatus}"></i>
        </div>
        <div class="menu-list">
            <div class="menu-list-item" :class="{ 'selected': item.key == day.key }"
                 v-for="(item, index) in days" :key="index" @click="selectServer(item)">{{ $t(item.key) }}
            </div>
        </div>
    </el-popover>
</template>

<script>
export default {
    name: "DatePickerDay",
    model: {
        prop: 'datetime',
        event: 'change'
    },
    props: {
        datetime: Array,
    },
    data: function () {
        return {
            selectOpenStatus: false,
            day: {
                key: '',
                datetime: [null, null]
            },
        }
    },
    computed: {
        days() {
            let timed = this.$store.getters['config/timedDayTimestamp']();
            return [
                {key: 'components.page.date-picker-day.days.today', datetime: [timed, timed + 86400 - 1]},
                {key: 'components.page.date-picker-day.days.yesterday', datetime: [timed - 86400 * 1, timed - 1]},
                {key: 'components.page.date-picker-day.days.7days', datetime: [timed - 86400 * 6, timed + 86400 - 1]},
                {key: 'components.page.date-picker-day.days.30days', datetime: [timed - 86400 * 29, timed + 86400 - 1]},
            ];
        }
    },
    watch: {
        datetime: {
            handler: function (n, o) {
                for (let day of this.days) {
                    if (day.datetime.toString() == n.toString()) {
                        this.day = day;
                        break;
                    }
                }
            },
            immediate: true
        }
    },
    methods: {
        selectServer(day) {
            // 关闭弹出框
            this.selectOpenStatus = false;
            // 屏蔽重复选择
            if (day.key == this.day.key) {
                return false;
            }
            // 改变选项
            this.day = day;
            // 广播事件
            this.$emit('change', this.day.datetime);
        },
    },
}
</script>

<style lang="scss" scoped>
.server-info {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.server-info .name {
    font-size: $font-size-fourth;
    margin-right: 5px;
}

.server-info .select-caret {
    color: $font-color-fourth;
    font-size: $font-size-third;
    transition: transform .3s;
    transform: rotate(180deg);
}

.server-info .select-caret.is-reverse {
    transform: rotate(0deg);
}

.menu-list {
    line-height: 34px;
    cursor: pointer;
}

.menu-list-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    padding: 0 20px;
}

.menu-list-item:hover {
    background-color: $body-bg;
}

.menu-list-item.selected {
    color: $color-primary;
    font-weight: 700;
}
</style>
